<template>
  <view class="over-box">
	  <scroll-view  style="height: 100%;" scroll-y="true">
		  <view>
			   <detail-banner autoplay :info="info.img_list" map="img" height="460" dot-mode="dot"></detail-banner>
			   <view class="go-back">
				   <view class="back-icon" @click="goBack"></view>
				</view>
			   <view class="base-info" >
					<view class="top-wrapper">
						<view class="title">{{ info.title }}</view>
						<view class="star-wrapper" :class="{'is-collect': isCollectClick}" @click="collect">
							<uni-icons :type="isCollect ? 'star-filled' : 'star'" :size="24" :color="isCollect ? '#FED742' : '#999'"></uni-icons>
						</view>
					</view>
					<view class="line"></view>
					<view class="user-info">
						<image :src="info.user?.avatar || '/static/images/logo.png'"  class="avatar"></image>
						<view class="uname">{{ info.user?.name }}</view>
						<view class="cert"><image class="cert-icon" src="/static/icons/cert.png" mode="" v-if="info.user?.merchant_cert_status == 2"/></view>
						<view class="out-team"  v-if="userStore?.userId == info?.user?.id" hover-class="tap-hover" @click="memberHandler(1)">队员管理</view>
					</view>
					<view class="times"><image class="times-icon" src="/static/icons/times.png" mode=""></image>{{info.show_time}}</view>
					<view class="address" @click="openLocation"> 
					      <image class="add-icon" src="/static/icons/address.png" mode=""></image> 
						  <view class="address-text">{{info.address}}</view>
						   <image class="dh" src="/static/icons/dh.png" mode=""></image> 
					</view>
					<view class="type"><image class="add-icon" src="/static/icons/cwlx.png" mode=""></image> {{ typeFormat(info.type) }}</view>
					<view class="footer">
							<view class="persons-list" v-if="info.enroll_users">
								<template >
									<view  v-for="(user, index) in info.enroll_users.slice(0,3)" :key="user.index">
										<image  :src="user.avatar || '/static/images/logo.png'" mode="aspectFill" class="avatar"></image>
									</view>
								</template>
							</view>
							<view class="sale-info" v-if ="info.people_num > 0">已售{{info.enroll_users ? info.enroll_users.length : '0'}}/{{info.people_num}}份</view>
							<view class="sale-info" v-else>已售{{info.enroll_users ? info.enroll_users.length : '0'}}/不限</view>
							<view class="price-info">
								<view>
									<span></span>
									<span v-for="(cost,index) in JSON.parse(info.price_level)" :key="index"  v-if="info.price_level">
									¥{{ cost.price }}<span v-if="index+1 < (JSON.parse(info.price_level).length)">/</span>
								    </span>
								</view>
								
							</view>
					</view>
			   </view>
			   <view class="detail-info">
				   <view class="desc-wrapper">
						<view class="u-title">活动说明</view> 
						<view class="activity-desc"> {{ info.desc }}</view>
				   </view>
				   <view  style="margin-bottom: 0;margin-top:20rpx;" v-if="info.imgs" class="detail-imgs">
				   	 <image v-for="(img,index) in info.imgs.split(',')" :key="index" class="info-image" :src="img" mode="widthFix" @click="imagePreview(index)"></image>
				   </view>
			   </view>
			   <view class="note-wrapper" v-if="note_list != false">
					<view class="title">萌宠大视界</view>
					<uv-waterfall ref="waterfall"
						v-model="note_list"
						:column-count="2"
						:add-time="100"
						:left-gap="0"
						:right-gap="0"
						:column-gap="10"
						@changeList="changeNoteList">
						<template v-slot:list1>
							<view v-for="(item, index) in list1" :key="index">
								<note-item :info="item"></note-item>
							</view>
						</template>
						<template v-slot:list2>
							<view v-for="(item, index) in list2" :key="index">
								<note-item :info="item"></note-item>
							</view>
						</template>
					</uv-waterfall>
					<view class="empty-box"></view>
			   </view>
			   
<!-- 			   <view class="detail-container" v-if="Object.keys(info) != false" style="width: 100%;">

			   	</view> -->
			   	<!-- 生成猫的识别二维码 -->
			   	<view class="qr-code-wrapper">
			   	  <canvas canvas-id="qrcode" :style="{width: `${qrCodeInfo.size}px`, height: `${qrCodeInfo.size}px`}" />
			   	</view>
			   	<!-- 分享海报 -->
			   	<view class="share-poster">
			   		<canvas canvas-id="sharePoster" :style="{width: `632px`, height: `938px`}" />
			   	</view>
			   	<fixed-footer>
			   		<template v-if="userStore?.userId == info?.user?.id">
			   			<view class="check-fail" v-if="info.status == 6">未通过审核</view>
			   			<view class="edit-status">
			   				<view class="edit"  v-if="info.status > 3 && info.status < 7" @click="editActivity">
			   					<uni-icons type="compose" :size="28" color="#666"></uni-icons>
			   					<text class="edit-text">编辑</text>
			   				</view>
			   				<view class="edit"  v-if="info.status > 6 || info.status <= 4" @click="share">
			   					<image class="share-icon" src="/static/icons/share.svg" mode=""></image>
			   					<text class="edit-text">分享</text>
			   				</view>
			   				<primary-btn class="pri-btn pub-btn" v-if="info.status < 3" 
			   				title="选择活动状态" @btnClick="$popupChange(this, 'statusPopup', 'open')"></primary-btn>
			   				<primary-btn class="w-btn pub-btn" title="报名截止可开启活动" @btnClick="chooseActivityStatus(7)"
			   					v-if="info.status == 3"></primary-btn>
			   				<view class="pri-btn end-btn" v-if="info.status == 4">活动已取消</view>
			   				<view class="pri-btn end-btn" v-if="info.status == 5">活动审核中</view>
			   				<primary-btn class="pri-btn " title="重新编辑或删除" @btnClick="editOrDel" v-if="info.status == 6"></primary-btn>
			   				<primary-btn class="pri-btn opacity-btn" title="活动进行中" disabled v-if="info.status == 7"></primary-btn>
			   				<view class="pri-btn end-btn" v-if="info.status == 8">活动已结束</view>
			   			</view>
			   		</template>
			   		<template v-else>
			   			<view class="edit-status">
			   				<view class="edit"   v-if="info.status > 6 || info.status <= 4" @click="share">
			   					<image class="share-icon" src="/static/icons/share.svg" mode=""></image>
			   					<text class="edit-text" style="width: 50rpx;">分享</text>
			   				</view>
			   				<view class="theme-btn pri-btn" style="opacity: 0.5" disabled v-if="info.status == 1 && !isEnrollDate">报名未开始</view>
			   				<primary-btn class="pri-btn" title="报名参加" @btnClick="next" v-if="(info.status == 2 || isEnrollDate) && info.is_enroll <= 0 && info.remaining_num > 0"></primary-btn>
			   				<button class="again-btn" type="default"   @click="next" v-if="info.status != 4 && info.status != 8 && info.is_enroll > 0 && info.remaining_num > 0 && info.is_charge ==1">再来一单</button>
			   				<primary-btn class="pri-btn" title="查看券码" @btnClick="checkCoupon" v-if="info.status != 4 && info.status != 8 && info.is_enroll > 0 "></primary-btn>
			   				<!-- <primary-btn class="opacity-btn" v-if="info.status != 4 && info.is_enroll > 0 && !info?.price_level" title="已报名" :disabled="true"></primary-btn> -->
			   				<!-- <primary-btn class="opacity-btn pri-btn" v-if="info.is_verify > 0 && info.status != 8" title="已验证" :disabled="true"></primary-btn> -->
			   				<primary-btn class="opacity-btn pri-btn" v-if="info.status == 3 && info.is_enroll <= 0" title="报名结束/待活动开始" :disabled="true"></primary-btn>
			   				<primary-btn class="opacity-btn pri-btn" v-if="info.status == 7 && info.is_enroll <= 0" title="活动进行中" :disabled="true"></primary-btn>
			   				<view class="end-btn w-btn" v-if="info.status == 4">活动已取消</view>
			   				<view class="end-btn pri-btn" v-if="info.status == 8">活动已结束</view>
			   			</view>
			   		</template>
			   	</fixed-footer>
			   	<uni-popup ref="checkPopup" type="bottom" :safe-area="false" @change="qrCodePopupChange" mask-background-color="rgba(0,0,0,0.7)">
			   		<view class="coupon-popup-content">
			   			<view class="close-ico" @click="$popupChange(this,'checkPopup')"><uni-icons type="closeempty" :size="20" color="#666"></uni-icons></view>
			   <!-- 			<view class="report-success" >活动报名成功</view> -->
			   			<view class="kq-box">
			   				<view class="title">{{ info.title }}</view>
			   				<view class="note margin" style="">活动地点：{{ info.address }}</view>
			   				<view class="note margin">活动时间：{{ activityDateFormat(info.activity_date_start, info.activity_date_end) }}</view>
			   				<view class="note margin">
			   					<text>活动类型：{{ typeFormat(info.type) }}</text>
			   					<text style="padding-left: 16rpx;" v-if="info.type == 1">-{{ info.pet_type == 1 ? '猫猫' : (info.pet_type == 2 ? '狗狗' : '其他') }}</text>
			   				</view>
			   				<!-- -->
			   				<view class="qrcode-part">
			   					<uni-icons type="left" size="20" class="turn-prev" color="#00CAC0" v-if ="curr_check_info.index > 0"  @click="turnPrev"></uni-icons>
			   					<uni-icons type="right" size="20" class="turn-next" color="#00CAC0" v-if ="curr_check_info.index < curr_check_info.total - 1" @click="turnNext"></uni-icons>
			   					<view class="check-status">{{curr_check_info.is_verify > 0 ? "已核验" : "待核验" }}</view>
			   					<view class="qrcode-img" @click="downLoadQrCode">
			   						<image class="img" :src="qrCodeInfo.src" mode="aspectFill"></image>
			   						<view class="vertify-tips" v-if="curr_check_info.is_verify > 0">身份验证成功</view>
			   					</view>
			   					<view class="check-package" >{{curr_check_info.level_name }}: {{curr_check_info.level_price }}</view>
			   					<view class="curr-package">第{{curr_check_info.index +1 }}个/共{{curr_check_info.total }}个</view>
			   				</view>
			   			</view>
			   			<view class="note code-tip">由发起方<span class="green">扫描二维码</span>验证身份</view>
			   			<view class="tips" v-if="curr_check_info.jb_num > 0">验券成功后可获得<span class="green">{{ curr_check_info.jb_num }}街贝</span>奖励</view>
			   		</view>
			   	</uni-popup>
			   	<modal ref="modal"></modal>
			   	<uni-popup ref="statusPopup" type="center" :is-mask-click="false">
			   		<view class="status-popup-content">
			   			<view class="close-ico" @click="$popupChange(this,'statusPopup')"><uni-icons type="closeempty" :size="20" color="#666"></uni-icons></view>
			   			<view class="title">{{ statusTitle }}</view>
			   			<view class="status-btn" hover-class="tap-hover" v-if="info.status < 2" @click="chooseActivityStatus(2)">报名进行中</view>
			   			<view class="tips" v-if="info.status == 2">
			   				<text class="tips-title">结束报名：</text>
			   				<text class="note">表示组队完成可选择结束报名，等待活动开始准备发车啦～</text>
			   			</view>
			   			<view class="status-btn" hover-class="tap-hover" v-if="info.status == 2" @click="chooseActivityStatus(3)">结束报名</view>
			   			<view class="tips">
			   				<text class="tips-title">取消组队：</text>
			   				<text class="note">取消发起的报名活动，若已有用户报名活动，收费活动系统将自动为报名用户退款</text>
			   			</view>
			   			<view class="status-btn" hover-class="tap-hover" @click="chooseActivityStatus(4)">取消组队</view>
			   			<view class="bottom-desc">若设置了报名时间，超过报名时间但未选择活动状态时，默认活动组队成功，等待活动开始。</view>
			   		</view>
			   	</uni-popup>
			   	<!-- 分享弹窗 -->
			   	<uni-popup ref="sharePopup" type="bottom" :safe-area="false">
			   		<view class="share-popup">
			   			<view class="title">生成分享</view>
			   			<view class="share-content">
			   				<button class="share-item" open-type="share">
			   					<image class="icon" src="/static/icons/wechat.png" mode=""></image>
			   					<text class="name send">发送好友</text>
			   				</button>
			   				<button class="share-item" @click="shareEvent(1)">
			   					<image class="icon" src="/static/icons/qrcode.png" mode=""></image>
			   					<text class="name">生成二维码</text>
			   				</button>
			   				<button class="share-item" @click="shareEvent(2)">
			   					<image class="icon" src="/static/icons/poster.png" mode=""></image>
			   					<text class="name">生成活动海报</text>
			   				</button>
			   				<button class="share-item" @click="shareEvent(3)">
			   					<image class="icon" src="/static/icons/urllink.png" mode=""></image>
			   					<text class="name">复制H5链接</text>
			   				</button>
			   			</view>
			   			<view class="cancel-btn" @click="$popupChange(this, 'sharePopup')">取消</view>
			   		</view>
			   	</uni-popup>
		  </view>
	  </scroll-view>
  </view>
</template>

<script>
	import formTitle from '../publish/form-title.vue'
	import uQRCode from '../../common/uqrcode.js'
	import { useUserStore } from '../../store/userStore'
	import { debounce, getIndexShareObject } from '../../common/utils'
	import request_config from '../../network/config.js'
	const RADIO = 2
	export default {
		components: {
			formTitle
		},
		data() {
			return {
				isCollectClick: false,
				isCollect: false,
				userStore: useUserStore(),
				activityId: 0,  // 活动id
				qrCodeInfo: {
				  src: '', // 生成的二维码临时路径-验券二维码
				  size: 200,  //二维码尺寸
				  content: '', //二维码所需地址
				},
				shareQrcode: '', // 分享二维码临时路径
				sharePosterUrl: '',  // 分享活动海报临时路径
				info: {}, // 活动详细信息
				statusTitle: '请选择活动状态\n选择后不可取消',
				isVertify: false,
				isReportTips: false,  // 是否是报名成功提示
				myApplyInfo: {},  // 我的报名信息
				debounceFuction: null,
				note_list: [],  // 笔记列表
				list1: [],
				list2: [],
				isCheckCode: false,  // 是否打开页面就查看券码
				qrCodeStateTimer: null,
				isEnrollDate: false,
				urlLink: '',  //小程序链接
				curr_check_info :{
					"is_verify": 0,
					"index":0,
					'level_name':'',
					'level_no':'',
					'level_price': 0.01,
					'discount_price': 0,
					'jb_num':0,
					'total': 0,
				},
				//用于授权消息通知
				tmplIds:['KO9TzD4MUU3H0kSQcUITOID_T1HArUDLpMaxS0hPDuU'],
			}
		},
		watch: {
			// 是否已收藏
			info: {
				handler(val) {
					// 是否已收藏
					this.isCollect = val?.is_collect > 0 ? true : false					
					const now = new Date().getTime()
					const	s = new Date(val?.enroll_date_start?.replace(/\-/g,'/')).getTime(),
						e = new Date(val?.enroll_date_end?.replace(/\-/g,'/')).getTime()
					if (s <= now && e >= now) {
						this.isEnrollDate = true
					} else {
						this.isEnrollDate = false
					}				
				},
				deep: true
			}
		},
		computed: {
			safeArea() {
				const { safeAreaInsets } = uni.getWindowInfo()
				return safeAreaInsets.bottom != 0 ? `${safeAreaInsets.bottom}px` : '30rpx'
			},
		},
		onLoad(options) {
			if (options.q) {
				const q = decodeURIComponent(options.q)
				const obj = this.splitArr(q)
				this.activityId = obj.activityId
			}
			if (options?.activityId) {
				this.activityId = options?.activityId
			}		
			if (options?.checkCode) {
				this.isCheckCode = true
			}
			if (options?.applySuccess) {
				console.log(options.applySuccess)
				this.getDetail()
				this.$nextTick(() => {
					this.checkCoupon()
				})
				this.isReportTips = true
				if(Object.keys(this.myApplyInfo).length > 0){
					this.$refs.checkPopup.open()
				}
			}
			this.getDetail()
			this.getNoteList()
			uni.$on('applySuccess', (data) => {
				this.getDetail()
				this.$nextTick(() => {
					this.checkCoupon()
				})
				this.isReportTips = true
				if(Object.keys(this.myApplyInfo).length > 0){
					this.$refs.checkPopup.open()
				}
			})
			uni.$on('editSuccess', ({editType}) => {
				if (editType > 0) {
					this.getDetail()
				}
			})
			this.debounceFuction = debounce(async () => {
				const res = await this.$request.post('/api/user/collect',{id: this.activityId})
				if (res.code == 200) {
					/* uni.showToast({
						title: '收藏成功',
						icon: 'none'
					}) */
				}
			})
		},
		onUnload() {
			uni.$off('applySuccess')
			uni.$off('editSuccess')
			if (this.qrCodeStateTimer) {
				clearInterval(this.qrCodeStateTimer)
			}
		},
		onReady() {
			this.qrCodeInit(1)
			// if (this.isCheckCode) {
			// 	this.checkCoupon()
			// }
		},
		onPullDownRefresh() {
			this.getDetail()
			setTimeout(() => {
				uni.stopPullDownRefresh()
			}, 1000)
		},
		onShareAppMessage() {
			const rs = {
			  title: this.info.title,
			  path: `/pages/detail/index?activityId=${this.activityId}`,
			  imageUrl: this.info.imgs.split(',').at(0)
			}
			return getIndexShareObject(rs)
		},
		onShareTimeline() {
			return {
				title: this.info.title,
				query: `activityId=${this.activityId}`,
				imageUrl: this.info.imgs.split(',').at(0)
			}
		},
		methods: {
			goBack() {
				var link_url = uni.getStorageSync('lastPage');
				uni.navigateBack({
				    delta: 1,
					fail() {
						uni.navigateTo({
							url: link_url,
						});
					}	
				});
			},
			change(e) {
				this.current = e.detail.current
			},
			clickItem(e) {
				this.swiperDotIndex = e
			},
			changeNoteList(e) {
				this[e.name].push(e.value)
			},
			editActivity() {
				uni.navigateTo({
					url: '/pages/publish/index',
					success: (res) => {
						res.eventChannel.emit('editInfo', {info: this.info})
					}
				})
			},
			// 打开活动地址的地图
			openLocation() {
				const { lng, lat } = this.info
				if (lng <= 0 || lat <= 0) {
					uni.showToast({
						title: '无法打开位置, 缺少地理坐标',
						icon: 'none'
					})
					return
				}
				uni.openLocation({
					latitude: Number(lat),
					longitude: Number(lng),
				})
			},
			// 重新编辑或删除
			editOrDel() {
				this.$refs.modal.show({
					content: '活动很精彩，确定要退出组队吗？',
					cancelText: '删除活动',
					confirmText: '重新编辑',
					showCloseIcon: true,
					success: async (res) => {
						// 编辑
						if (res.confirm) {
							uni.navigateTo({
								url: '/pages/publish/index',
								success: (res) => {
									res.eventChannel.emit('editInfo', {info: this.info})
								}
							})
						} else {
							// 删除
							const result = await this.$request.post('/api/activity/del',{id: this.activityId})
							if (result.code == 200) {
								uni.showToast({
									title: '已删除',
									icon: 'success'
								})
								uni.$emit('editSuccess', {editType: 0})
								setTimeout(() => {
									uni.navigateBack()
								}, 1500)
							}
						}
					}
				})
			},
			// 发起人修改活动状态
			chooseActivityStatus(status) {
				this.$refs.statusPopup.close()
				let statusText = ''
				statusText = status == 2 ? '开启报名' : (status == 3 ? '结束报名' : '取消组队')
				if (status == 7) {
					statusText = '开启活动'
				}
				this.$refs.modal.show({
					content: `是否确定${statusText}？`,
					btnDisplay: 'vertical',
					cancelText: '我再想想',
					success: async (res) => {
						if (res.confirm) {
							const res = await this.$request.post('/api/activity/update_status', {
								id: this.activityId,
								status
							})
							if (res.code == 200) {
								uni.showToast({
									title: '活动状态已修改',
									icon: 'success'
								})
								this.info.status = status
							}
						} else {
							this.$refs.statusPopup.open()
						}
					}
				})
				
			},
			// 组队操作
			memberHandler(type) {
				// 队员管理
				if (type > 0) {
					let isCharge = true
					if (!this.info.price_level || JSON.parse(this.info.price_level) == false) {
						isCharge = false
					}
					uni.navigateTo({
						url: '/pages/mine/manageMyActivity/memberManage',
						success: (res) => {
							res.eventChannel.emit('memberManage', {
								activityId: this.activityId,
								peopleNum: this.info.people_num,
								isCharge: isCharge,
								activityStatus: this.info.status,
								isStart: this.info.is_start,
							})
						}
					})
				} else {
					// 退出组队
					this.$refs.modal.show({
						content: '活动很精彩，确定要退出组队吗？',
						btnDisplay: 'vertical',
						cancelText: '我再想想',
						success: async (res) => {
							if (res.confirm) {
								const result = await this.$request.post('/api/user/quit_team', {
									id: this.activityId
								})
								if (result.code == 200) {
									const title = this.info.price_level ? '已退出组队,系统会退回报名费用' : '已退出组队'
									uni.showToast({
										title: title,
										icon: 'none',
									})
									this.info.is_enroll = 0
									setTimeout(() => {
										this.getDetail()
									}, 1500)
								}
							}
						}
					})
				}
			},
			// 生成二维码
			qrCodeInit(type){
				//const content = type == 1 ? `activityId=${this.activityId}&userId=${this.userStore.userId}` : `${request_config.baseUrl}mp/qrcode?activityId=${this.activityId}`
			 const content = type == 1 ? `level_no=${this.curr_check_info.level_no}` : `${request_config.baseUrl}mp/qrcode?activityId=${this.activityId}`
			  uQRCode.make({
					canvasId: 'qrcode',
					componentInstance: this,
					text: content,
					size: this.qrCodeInfo.size,
					typeNumber: 4,
					correctLevel : 1,
					foregroundColor: this.curr_check_info.discount_price > 0 ? "#2C74E6": '#282C34',
					margin: 6,
					success: async (res) => {
						if (type == 1) {
							this.qrCodeInfo.src = res
						} else {
							this.shareQrcode = res
						}
					},
			 })
			},
			downLoadQrCode(){
				uni.saveImageToPhotosAlbum({
				    filePath: this.qrCodeInfo.src,
				    success: res => {
				        uni.showToast({
				        	title: '保存成功',
				        	icon: 'none'
				        })
				    },
				    fail: err => {
				        console.log(err);
				    }
				});
			},
			// 分享相关
			share() {
				this.$refs.sharePopup.open()
				if (!this.shareQrcode) {
					this.qrCodeInit(2)
				}
			},
			async shareEvent(type) {
				if (type == 1) {
					// #ifdef MP-WEIXIN
					uni.showShareImageMenu({
						path: this.shareQrcode,
						fail: () => {}
					})
					// #endif
				} else if (type == 2) {
					// 生成海报
					if (this.sharePosterUrl) {
						uni.showShareImageMenu({
							path: this.sharePosterUrl,
							fail: () => {}
						})
						return
					}
					this.draw()
				} else {
					// 复制H5链接
					if (this.urlLink) {
						uni.setClipboardData({
							data: this.urlLink,
							success: () => {
								
							}
						})
						return
					}
					const res = await this.$request.get('api/login/get_applet_link', {
						path: '/pages/detail/index',
						query: `activityId=${this.activityId}`
					})
					if (res.code == 200) {
						this.urlLink = res.data.url_link
						uni.setClipboardData({
							data: this.urlLink,
							success: () => {
								
							}
						})
					}
				}
			},
			async draw() {
				uni.showLoading({
					title: '生成中',
					mask: true
				})
				const ctx = uni.createCanvasContext('sharePoster')
				ctx.drawImage('/static/images/share-bg.png', 0, 0, 316*RADIO, 469*RADIO)
				ctx.save()
				this.drawRoundedRect(ctx,12*RADIO,55*RADIO,292*RADIO,203*RADIO,10*RADIO)
				ctx.clip()
				const main_img = await this.downloadImage(this.info.imgs.split(',').at(0))
				const main_img_info = await this.getImg(main_img,292*RADIO,203*RADIO)
				var dx = 0
				if(main_img_info.width > main_img_info.height) {
					dx = (main_img_info.height - main_img_info.width)/2 * (292*RADIO/main_img_info.height);
				}
				ctx.drawImage(main_img, dx, 0, main_img_info.width, main_img_info.height, 12*RADIO, 55*RADIO, 292*RADIO, 203*RADIO)
				ctx.restore()
				ctx.drawImage('/static/images/raw.png',220*RADIO, 230*RADIO,96*RADIO,150*RADIO)
				ctx.setFontSize(15*RADIO)
				// ctx.fillText(this.info.title, 12*RADIO, 283*RADIO)
				if (this.info.title.length > 14) {
					ctx.fillText(this.info.title.substring(0, 14), 12*RADIO, 283*RADIO)
					ctx.fillText(`${this.info.title.substring(14, 28)}${this.info.title.length > 28 ? '...' : ''}`, 12*RADIO, 306*RADIO)
				} else {
					ctx.fillText(this.info?.title, 12*RADIO, 293*RADIO)
				}
				
				ctx.setFontSize(12*RADIO)
				ctx.setFillStyle('#7B7B7B')
				ctx.fillText(this.activityDateFormat(this.info.activity_date_start, this.info.activity_date_end), 30*RADIO, 335*RADIO)
				if (this.info.address && this.info.address.length > 20) {
					ctx.fillText(this.info.address.substring(0, 20) + '...', 30*RADIO, 356*RADIO)
				} else if (this.info.address?.length <= 20) {
					ctx.fillText(this.info.address, 30*RADIO, 356*RADIO)
				} else if (!this.info.address) {
					ctx.fillText('不限', 30*RADIO, 356*RADIO)
				}
				ctx.drawImage(this.shareQrcode, 28*RADIO, 387*RADIO, 54*RADIO, 54*RADIO)
				
				ctx.draw(false, () => {
				  setTimeout(() => {
				    uni.canvasToTempFilePath({
				      canvasId: 'sharePoster',
				      quality: 1,
				      success: (res) => {
								uni.hideLoading()
				        const { tempFilePath } = res
								this.sharePosterUrl = tempFilePath
				        uni.showShareImageMenu({
									path: tempFilePath,
									fail: () => {}
								})
				      }
				    }, this)
				  }, 300)
				})
			},
			drawRoundedRect(ctx, x, y, width, height, radius) {
				ctx.beginPath();
				// 从左上角开始
				ctx.moveTo(x + radius, y);
				// 上边和右上角
				ctx.arcTo(x + width, y, x + width, y + radius, radius);
				// 右边和右下角
				ctx.arcTo(x + width, y + height, x + width - radius, y + height, radius);
				// 下边和左下角
				ctx.arcTo(x, y + height, x, y + height - radius, radius);
				// 左边和左上角
				ctx.arcTo(x, y, x + radius, y, radius);
				ctx.closePath();
			},
			// 获取图片信息
			getImageInfo(url) {
			  return new Promise((resolve) => {
			    uni.getImageInfo({
			      src: url,
			      success: (res) => {
			        resolve(res)
			      }
			    })
			  })
			},
			// 获取图片信息
			async getImg(img_url,dWidth, dHeight) {
			  const img_info = await this.getImageInfo(img_url)
				let data = {}
			  // const img_w = img_info.width < img_info.height ? img_info.width : img_info.height
			  if (img_info.width < img_info.height) {
					data = {
						width : img_info.width,
						height: (img_info.width*dHeight) / dWidth
					}
				} else if (img_info.width > img_info.height) {
					data = {
						width: (img_info.height*dWidth) / dHeight,
						height: img_info.height
					}
				} else {
					data = {
						width: img_info.width,
						height: img_info.height
					}
				}
				return data
			},
			// 下载图片
			downloadImage(url) {
			  return new Promise((resolve, reject) => {
			    uni.downloadFile({
			      url,
			      success: (res) => {
			        resolve(res.tempFilePath)
			      },
			      fail: (err) => {
			        reject(err)
			        uni.showToast({
			          title: '图片加载失败，请重新打开',
			          icon: 'none'
			        })
			      }
			    })
			  })
			},
			// 报名参加
			next() {
				if (this.userStore.userId <= 0) {
					uni.showModal({
						title: '欢迎来到See Wow小程序！', // 弹窗标题
						content: '在开始体验前，为确保您能顺畅查看已购套餐、完成线下核销等必要功能，我们需要您先授权登录，请放心，我们始终将您的隐私和使用体验放在首位；'+'\r\n\n'+ '🔒 严格保护隐私：您的个人信息仅用于小程序功能实现，不会向商家或其他第三方提供。\r\n\n 🛍️ 便捷管理：登录后可随时查询订单、核销权益，不错过任何宠物友好福利！\r\n\r\n 点击下方按钮快速授权，马上开启您和爱宠的专属旅程吧～ ✨', // 弹窗内容
						showCancel: true, // 是否显示取消按钮
						cancelText: '取消', // 取消按钮的文字，默认为"取消"
						cancelColor: '#000000', // 取消按钮的文字颜色
						confirmText: '确认授权', // 确认按钮的文字，默认为"确定"
						confirmColor: '#3CC51F', // 确认按钮的文字颜色
						success: function (res) {
							if (res.confirm) {
								// 用户点击了确定按钮
								uni.navigateTo({
									url: '/pages/login/login'
								})
								//console.log('用户点击了确定');
								// 在这里执行你的逻辑
							} else if (res.cancel) {
								// 用户点击了取消按钮
								//console.log('用户点击了取消');
							}
						}
					});
					// uni.showToast({
					// 	title: '请先登录',
					// 	icon: 'none'
					// })

					return
				}
				const enroll_users_num = this.info.enroll_users?.length || 0
				if (this.info.people_num > 0 && enroll_users_num == this.info.people_num) {
					uni.showToast({
						title: '报名人数已满',
						icon: 'none'
					})
					return
				}
				//授权一下活动
				if (this.info.is_subscribe == 0) {
					uni.requestSubscribeMessage({
				         tmplIds: this.tmplIds,
				         success: (res) => {
				             //订阅
							this.$request.post('api/user/subscribe');
				         }
				     })
				}

				uni.navigateTo({
					url: '/pages/detail/apply?activityId='+ this.info.id,
					success: (res) => {
						res.eventChannel.emit('applyInfo', {
							info: this.info
						})
					}
				})
			},
			// 收藏
			async collect() {
				this.isCollect = !this.isCollect
				this.isCollectClick = true
				setTimeout(() => {
					this.isCollectClick = false
				}, 200)
				this.debounceFuction()
			},
			// 照片预览
			imagePreview(index) {
				const urls = this.info?.imgs?.split(',')
				uni.previewImage({
					urls: urls,
					current: index,
					longPressActions: true,
				})
			},
			// 二维码popup显示隐藏
			qrCodePopupChange(e) {
				if (e.show) {
					if (this.curr_check_info.is_verify > 0) {
						return
					}
					this.qrCodeStateTimer = setInterval(() => {
						this.checkVerifyStatus()
					}, 2000)
				} else {
					if (this.qrCodeStateTimer) {
						clearInterval(this.qrCodeStateTimer)
					}
				}
			},
			// 查询验证状态
			async checkVerifyStatus() {
				if (!this.myApplyInfo.id) {
					//this.checkCoupon()
				}
				const res = await this.$request.get('/api/activity/verify_status_v2',{ level_no: this.curr_check_info.level_no },{ load: false })
				if (res.code == 200) {
					this.curr_check_info.is_verify = res.data.is_verify;
					this.myApplyInfo[this.curr_check_info.index].is_verify  = res.data.is_verify;
					if (res.data.is_verify > 0) {
						clearInterval(this.qrCodeStateTimer);
					}
				}
				// const res = await this.$request.get('/api/activity/verify_status',{ enroll_id: this.myApplyInfo.id },{ load: false })
				// if (res.code == 200) {
				// 	this.info.is_verify = res.data.is_verify
				// 	if (res.data.is_verify > 0) {
				// 		clearInterval(this.qrCodeStateTimer)
				// 	}
				// }
			},
			// 查看券码
			async checkCoupon() {
				this.isReportTips = false
				//if (Object.keys(this.myApplyInfo) == false) {
					// /api/activity/member_info =》 /api/activity/check_lists
					const res = await this.$request.get('/api/activity/check_lists', {
						activity_id: this.activityId,
						user_id: this.userStore.userId
					})
					if (res.code == 200) {
						this.myApplyInfo = res.data
						var currr_info = res.data[0];
						this.curr_check_info.index = 0;
						this.curr_check_info.level_name = currr_info.level_name;
						this.curr_check_info.level_price = currr_info.level_price;
						this.curr_check_info.total = res.data.length;
						this.curr_check_info.is_verify = currr_info.is_verify;
						this.curr_check_info.level_no = currr_info.level_no;
						this.curr_check_info.jb_num = currr_info.jb_num;
						this.curr_check_info.discount_price = currr_info.discount_price;
						this.qrCodeInit(1)
					} else {
						uni.showToast({
							title: '网络错误',
							icon: 'none'
						})
						return
					}
				//}
				if (!this.qrCodeInfo.src) {
					this.qrCodeInit(1)
				}
				this.$refs.checkPopup.open()
			},
			turnPrev (){
				this.curr_check_info.index = this.curr_check_info.index -1;
				this.getCheckInfoByIndex();
			},
			turnNext (){
				this.curr_check_info.index = this.curr_check_info.index +1;
				this.getCheckInfoByIndex();
			},
			getCheckInfoByIndex() {
				var curr_info = this.myApplyInfo[this.curr_check_info.index];
				this.curr_check_info.level_name = curr_info.level_name;
				this.curr_check_info.level_price = curr_info.level_price;
				this.curr_check_info.level_no = curr_info.level_no;
				this.curr_check_info.is_verify = curr_info.is_verify;
				this.curr_check_info.discount_price = curr_info.discount_price;
				this.curr_check_info.total = this.myApplyInfo.length;
				this.qrCodeInit(1);
				//启动定时器
				if (curr_info.is_verify == 0) {
					clearInterval(this.qrCodeStateTimer);
					this.qrCodeStateTimer = setInterval(() => {
						this.checkVerifyStatus()
					}, 2000);
				}else{
					clearInterval(this.qrCodeStateTimer)
				}
			},
			async getDetail() {
				const id = this.activityId
				const res = await this.$request.get('/api/activity/detail',{id})
				if (res.code == 200) {
					this.info = res.data
				}
			},
			// 获取笔记列表
			async getNoteList() {
				const res = await this.$request.get('/api/note/lists',{activity_id: this.activityId})
				if (res.code == 200) {
					this.note_list = res?.data || []
				}
			},
			typeFormat(type) {
				switch (type){
					case 1:
						return '宠物活动'
						break;
					case 2:
					return '宠物友好'
						break;
					case 3:
						return '宠物市集'
						break;
					case 4:
						return '其他活动'
						break;
				}
			},
			dateContrast(date1, date2, isOpenEqual = true) {
				let d2 = ''
				if (!date2) {
					d2 = new Date().getTime()
				}
				const d1 = new Date(date1).getTime()
				if (isOpenEqual) {
					return d1 >= d2 ? true : false
				} else {
					return d1 > d2 ? true : false
				}
			},
			activityDateFormat(startDate, endDate) {
				if (!startDate) {
					return '不限'
				}
				const s = startDate?.substring(0, startDate?.lastIndexOf(':')).replace(/\-/g, '.'),
					e = endDate?.substring(0, endDate?.lastIndexOf(':')).replace(/\-/g, '.')
				return `${s}～${e}`
			},
			// 分离微信二维码码携带的参数
			splitArr(url) {
			  const arr = url.split("?")[1].replace(/=/g, ":").split('&')
			  let obj = {}
			  for (let i = 0; i < arr.length; i++) {
			    let split = arr[i].split(':')
			    obj[split[0]] = split[1]
			  }
			  return obj
			},
		}
	}
</script>

<style>
 .over-box{
	 width: 100%;
	 height: 100%;
	 overflow-x: hidden;
	 overflow-y: auto;
 }
</style>
<style scoped lang="scss">
	.share-popup {
		background-color: #fff;
		border-radius: 24rpx 24rpx 0 0;
		padding-bottom: v-bind(safeArea);
		
		.title {
			text-align: center;
			font-size: 26rpx;
			padding: 32rpx 0 20rpx;
		}
		.share-content {
			padding-bottom: 38rpx;
			border-bottom: 1px solid #e9e9e9;
			display: flex;
			align-items: center;
			
			.share-item {
				flex: 1;
				display: flex;
				flex-direction: column;
				align-items: center;
				background-color: transparent;
				border: none;
				padding: 0;
				&::before {
					border: none;
				}
				&::after {
					border: none;
				}
				.icon {
					width: 90rpx;
					height: 90rpx;
				}
				.name {
					font-size: 24rpx;
					margin-top: 10rpx;
					color: #999;
				}
			}
		}
		.cancel-btn {
			font-size: 32rpx;
			color: #666;
			padding: 36rpx 0 16rpx;
			text-align: center;
		}
	}
	
	
	.detail-container {
		overflow-x: hidden;
		padding: 30rpx;
		padding-bottom: 200rpx;
		
		.title-wrapper {
			display: flex;
			justify-content: space-between;
			align-items: center;
			width: 100%;
			margin-bottom: 20rpx;
			.title {
				font-size: 36rpx;
				font-weight: bold;
				width: calc(100% - 60rpx);
			}
			.star-wrapper {
				transition: all 0.2s linear;
			}
			.is-collect {
				transform: scale(1.3);
			}
		}
		.desc-content {
			font-size: 30rpx;
			padding: 30rpx 0;
		}
		.info-part {
			margin-bottom: 30rpx;
		}
		.pet-type {
			display: flex;
			align-items: center;
			margin-bottom: 5px;
			.pet-item {
				width: 150rpx;
				height: 64rpx;
				border-radius: 12rpx;
				text-align: center;
				line-height: 64rpx;
				font-size: 28rpx;
				background-color: #f6f6f6;
				margin-right: 20rpx;
			}
			.pet-item-active {
				background-color: rgba($color: $uni-color-primary, $alpha: 0.1);
				border: 1px solid $uni-color-primary;
			}
		}
		.u-title {
			font-weight: bold;
			margin-bottom: 20rpx;
			display: flex;
			font-size: 32rpx;
			align-items: center;
			.note {
				font-size: 28rpx;
				color: #999;
				font-weight: normal;
				padding-left: 20rpx;
			}
			.out-team {
				font-size: 13px;
				font-weight: 300;
				height: 60rpx;
				border-radius: 30rpx;
				line-height: 60rpx;
				margin-left: auto;
				color: $uni-color-primary;
				text-decoration: underline;
			}
		}
		.cost-list {
			margin-bottom: 0;
		}
		.cost-title {
			margin-bottom: 16rpx;
			padding-top: 30rpx;
		}
		.info-list-item {
			display: flex;
			align-items: center;
			padding: 24rpx 0;
			border-bottom: 1px solid #f0f0f0;
			.title {
				font-weight: 500;
				min-width: 130rpx;
			}
			.note {
				color: #7B7B7B;
				padding-left: 16rpx;
				font-size: 28rpx;
				width: calc(100% - 130rpx);
			}
			.location-note {
				width: calc(100% - 200rpx);
			}
			.location-icon {
				margin-left: auto;
			}
			&:last-child {
				border-bottom: none;
				padding-bottom: 20px;
			}
			
			.cost-item-title {
				font-weight: 500;
			}
			.cost-item-note {
				color: #7B7B7B;
				padding-left: 16rpx;
				font-size: 28rpx;
			}
		}
		.location-wrapper {
			display: flex;
			align-items: flex-start;
		}
		
		.user-info {
			width: 100%;
			display: flex;
			align-items: center;
			.avatar {
				width: 88rpx;
				height: 88rpx;
				border-radius: 50%;
				background-color: #eee;
			}
			.right {
				padding-left: 24rpx;
				width: calc(100% - 88rpx);
				.name-wrapper {
					font-weight: bold;
					display: flex;
					align-items: center;
					
					.name {
						max-width: 240rpx;
						display: -webkit-box;
						-webkit-box-orient: vertical;
						text-overflow: ellipsis;
						line-clamp: 1;
						-webkit-line-clamp: 1;
						overflow: hidden;
					}
					
					.shop-auth {
						width: 36rpx;
						height: 36rpx;
						margin-left: 12rpx;
					}
				}
				.info {
					display: flex;
					align-items: center;
					color: #999;
					font-size: 28rpx;
					.line {
						height: 24rpx;
						width: 1px;
						background-color: #999;
						margin: 0 20rpx;
					}
				}
			}
		}

		.persons-list {
			display: flex;
			flex-wrap: wrap;
			align-items: center;
			.avatar {
				width: 60rpx;
				height: 60rpx;
				border-radius: 50%;
				overflow: hidden;
				background-color: #eee;
				margin-right: 5px;
				.img {
					width: 100%;
					height: 100%;
				}
			}
			.avatar-more {
				display: flex;
				align-items: center;
				justify-content: center;
				width: 60rpx;
				height: 60rpx;
				border-radius: 50%;
				background-color: #eee;
			}
		}
		.info-image {
			width: 100%;
		}
		
		.desc-wrapper {
			margin-top: 80rpx;
			.activity-desc {
				word-wrap: break-word;
				white-space: pre-line;
				line-height: 1.5;
			}
		}
	}
	
	.check-fail {
		position: absolute;
		top: -70rpx;
		left: 0;
		right: 0;
		font-size: 28rpx;
		color: #fff;
		background-color: rgba(0, 0, 0, .5);
		text-align: center;
		height: 70rpx;
		line-height: 70rpx;
	}
	.edit-status {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		.edit {
			margin-right: auto;
			display: flex;
			flex-direction: column;
			align-items: center;
			font-size: 24rpx;
			color: #666;
			.share-icon {
				width: 44rpx;
				height: 44rpx;
			}
			.edit-text {
				margin-top: 6rpx;
			}
		}
	}
	.pri-btn {
		width: calc(100% - 100rpx);
	}
	.end-btn {
		background-color: #eee;
		height: 88rpx;
		border-radius: 44rpx;
		text-align: center;
		line-height: 88rpx;
		color: #999;
	}
	.theme-btn {
		background-color: rgba($color: $uni-color-primary, $alpha: 0.7);
		height: 88rpx;
		border-radius: 44rpx;
		text-align: center;
		line-height: 88rpx;
		color: #fff;
	}
	.again-btn{
		width: calc(100% - 350rpx);
		margin-left: 30rpx;
		margin-right: 10rpx;
		background: #fff;
		height: 88rpx;
		border:1px solid #00CAC0;
		border-radius: 44rpx;
		text-align: center;
		line-height: 88rpx;
		color: #00CAC0;
	}
	.w-btn {
		width: 100%;
	}
	.opacity-btn {
		opacity: 0.7;
	}
	
	.turn-prev{
		position: absolute;
		z-index: 99;
		left:15%;
		top:50%;
	}
	.turn-next{
		position: absolute;
		z-index: 99;
		right:15%;
		top:50%;
	}
	
	.coupon-popup-content {
		background-color: #F8FAFD ;
		height:650px;
		background-position: center;
		background-repeat: no-repeat; /* 防止背景图像重复 */
		border-radius: 30rpx 30rpx 0 0;
		padding: 30rpx;
		width: 100%;
		position: relative;
		display: flex;
		flex-direction: column;
		align-items: center;
		padding-bottom: v-bind(safeArea);
		
		.report-success {
			padding-bottom: 24rpx;
			font-size: 32rpx;
			font-weight: 500;
		}
		.title {
			padding-left: 45rpx;
			padding-top: 10rpx;
			font-size: 30rpx;
			font-weight: 500;
			display: -webkit-box;
			-webkit-box-orient: vertical;
			text-overflow: ellipsis;
			line-clamp: 1;
			-webkit-line-clamp: 1;
			overflow: hidden;
			color: #262626;
			line-height: 30px;
		}
		.note {
			padding-left: 45rpx;
			font-weight: 400;
			font-size: 13px;
			color: #7B7B7B;
			line-height: 24px;
			text-align: left;
			font-style: normal;
			text-transform: none;
		}
		.margin {
			margin-top: 5rpx;
		}
		.qrcode-part {
			width: 100%;
			display: flex;
			flex-direction: column;
			align-items: center;
			margin-top:24px;
		}
	
		.code-tip {
			height: auto;
			// background-color: #ddd;
			width: 100%;
			display: flex;
			justify-content: center;
			align-items: center;
			margin-top: 30px;
			padding-left: 10px;
			// background-color: #fff;
			// padding: 0 8rpx;
		}
		
		.qrcode-img {
			width: 160px;
			height: 160px;
			border-radius: 24rpx;
			overflow: hidden;
			margin: 24px 0 12px;
			position: relative;
			.img {
				width: 100%;
				height: 100%;
			}
			.vertify-tips {
				position: absolute;
				left: 0;
				top: 0;
				bottom: 0;
				right: 0;
				background-color: rgba(255, 255, 255, .9);
				font-size: 32rpx;
				font-weight: 500;
				display: flex;
				justify-content: center;
				align-items: center;
			}
		}
		.meal {
			display: flex;
			align-items: center;
			font-size: 28rpx;
			margin-bottom: 12rpx;
		}
		.tips {
			font-size: 26rpx;
			color: #999;
		}
		.green{
			font-size: 26rpx;
			color: $uni-color-primary;
		}
	}
	
	.kq-box{
		width: 327px;
		height: 468px;
		margin-top:50rpx;
		background-color: #F8FAFD;
		background-image: url(../../static/images/kq@2x.png);
		background-size:100% 100%;
		border-radius: 30rpx;
	}
	.qr-code-wrapper {
		position: fixed;
		overflow: hidden;
		left: -2000rpx;
		opacity: 0;
		top: 400rpx;
	}
	.close-ico {
		position: absolute;
		top: 20rpx;
		right: 24rpx;
	}
	.check-package{
		width: 193px;
		height: 32px;
		overflow: hidden;
		background: #F5F5F5;
		border-radius: 8px 8px 8px 8px;
		font-weight: 400;
		font-size: 13px;
		color: #7B7B7B;
		line-height: 64rpx;
		text-align: center;
		font-style: normal;
		text-transform: none;
	}
	
	
	.curr-package{
		margin-top:30rpx;
		font-weight: 400;
		font-size: 13px;
		color: #7B7B7B;
		line-height: 15px;
		text-align: center;
		font-style: normal;
		text-transform: none;
	}
	
	.check-status{
		margin-top: 24px;
		font-weight: 500;
		font-size: 20px;
		color: #000000;
		line-height: 23px;
		text-align: left;
		font-style: normal;
		text-transform: none;
	}
	
	.status-popup-content {
		width: 620rpx;
		border-radius: 30rpx;
		background-color: #fff;
		padding: 30rpx;
		position: relative;
		.title {
			font-weight: 500;
			font-size: 32rpx;
			word-break: break-all;
			text-align: center;
			white-space: pre-wrap;
			padding-top: 20rpx;
			padding-bottom: 30rpx;
		}
		.status-btn {
			width: 100%;
			height: 72rpx;
			border-radius: 36rpx;
			background-color: $uni-color-primary;
			color: #fff;
			text-align: center;
			line-height: 72rpx;
			font-size: 30rpx;
			margin: 24rpx 0;
		}
		.tips {
			display: flex;
			align-items: center;
			flex-direction: column;
			font-size: 28rpx;
			color: #666;
			margin-top: 40rpx;
			padding: 0 20rpx;
			.tips-title {
				font-weight: 500;
			}
			.note {
				text-align: center;
			}
		}
		.bottom-desc {
			font-size: 24rpx;
			color: #999;
			margin-top: 80rpx;
			text-align: center;
		}
	}
	.qr-code-wrapper {
		position: fixed;
		overflow: hidden;
		left: -2000rpx;
		opacity: 0;
		top: 400rpx;
	}
	.share-poster {
		position: fixed;
		overflow: hidden;
		right: -2000rpx;
		top: 0;
		opacity: 0;
	}
	.base-info{
		position: relative;
		width: 718rpx;
		min-height: 100rpx;
		background: #FFFFFF;
		border-radius: 24rpx;
		justify-content: space-between;
		align-items: center;
		margin:0 auto;
		margin-top:-40rpx;
		margin-bottom: 16rpx;
		padding-bottom:40rpx;
		z-index: 99;
		.top-wrapper{
			width: 686rpx;
			height: auto;
			margin:0 auto;
			overflow:hidden;
			position: relative;
			.title {
				display: block;
				width: 582rpx;
				height: auto;
				font-family: PingFangSC, PingFang SC;
				font-weight: 500;
				font-size: 36rpx;
				color: #262626;
				text-align: left;
				font-style: normal;
				text-transform: none;
				margin-top:40rpx;
				margin-left: 16rpx;
				float:left;
			}
			.star-wrapper {
				position: absolute;
				transition: all 0.2s linear;
				top:40rpx;
				right: 0;
				width:40rpx;
				height: auto;
			}
			.is-collect {
				transform: scale(1.3);
			}
		}
		.line{
			width: 670rpx;
			height: 2rpx;
			background-color: #E5E5E5;
			margin:0 auto;
			margin-top:22rpx;
		}
		.user-info{
			position: relative;
			display: block;
			width: 686rpx;
			height: 56rpx;
			margin-left: 16rpx;
			margin-top:22rpx;
			.avatar{
				width: 56rpx;
				height: 56rpx;
				border-radius: 28rpx;
				float:left;
				margin-right: 10rpx;
				.cret{
					
				}
			}
			.uname{
				width: auto;
				height: 56rpx;
				line-height:56rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 24rpx;
				color: #7B7B7B;
				text-align: left;
				font-style: normal;
				text-transform: none;
				float: left;
			}
			.cert{
				.cert-icon{
					margin-top:15rpx;
					width: 30rpx;
					height: 30rpx;
					line-height:56rpx;
					margin-left: 16rpx;
					float: left;	
				}
			}
			.out-team {
				position: absolute;
				font-size: 13px;
				font-weight: 300;
				height: 60rpx;
				border-radius: 30rpx;
				line-height: 60rpx;
				margin-left: auto;
				color: $uni-color-primary;
				text-decoration: underline;
				right:16rpx;
				top:0rpx;
			}
		}
		
		.times{
			display: block;
			clear: both;
			width: 100%;
			margin-top: 20rpx;
			height: 30rpx;
			line-height: 30rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			font-size: 24rpx;
			color: #7B7B7B;
			text-align: left;
			font-style: normal;
			text-transform: none;
			float: left;
			margin-bottom: 18rpx;
			.times-icon {
				width: 30rpx;
				height: 30rpx;
				margin-left: 16rpx;
				float: left;
				margin-right: 10rpx;
			}
		}
		
		.address{
			display: block;
			position: relative;
			clear: both;
			width: 100%;
			height: auto;
			line-height: 30rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			font-size: 24rpx;
			color: #7B7B7B;
			text-align: left;
			font-style: normal;
			text-transform: none;
			margin-bottom: 18rpx;
			.add-icon {
				width: 30rpx;
				height: 30rpx;
				margin-left: 16rpx;
				float: left;
				margin-right: 10rpx;
			}
			.dh{
				width: 42rpx;
				height: 42rpx;
				position: absolute;
				top:-10rpx;
				right: 16rpx;
			}
			.address-text{
				width: 600rpx;
				float: left;
			}
			
		}
		.type{
			display: block;
			clear: both;
			width: 100%;
			height: 30rpx;
			line-height: 30rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			font-size: 24rpx;
			color: #7B7B7B;
			text-align: left;
			font-style: normal;
			text-transform: none;
			margin-bottom: 18rpx;
			.add-icon {
				width: 30rpx;
				height: 30rpx;
				margin-left: 16rpx;
				float: left;
				margin-right: 10rpx;
			}
			
		}
		.footer{
			width: 686px;
			height: 56rpx;
			display: block;
			margin-top:40rpx;
			margin-left: 16rpx;
			position: relative;
			overflow: hidden;
			.out-team{
				display: block;
				float: left;
				font-size: 13px;
				font-weight: 300;
				height: 60rpx;
				border-radius: 30rpx;
				line-height: 60rpx;
				margin-left: 30rpx;
				color: $uni-color-primary;
				text-decoration: underline;
			}
			.sale-info{
				display: block;
				float: left;
				width: auto;
				height: 56rpx;
				line-height: 56rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 26rpx;
				color: #7B7B7B;
				text-align: left;
				font-style: normal;
				text-transform: none;
				margin-left:10rpx;
			}
			.price-info{
				position: absolute;
				width: 424rpx;
				height: 56rpx;
				left: 256rpx;
				top:0;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 40rpx;
				color: #00CAC0;
				text-align: right;
				font-style: normal;
				text-transform: none;	
			}
			.persons-list {
				width: 100rpx;
				display: block;
				float: left;
				margin-top:7rpx;
				.avatar {
					width: 40rpx;
					height: 40rpx;
					float: left;
					border-radius: 40rpx;
					overflow: hidden;
					background-color: #eee;
					margin-right:-10rpx;
				}
				.avatar-more {
					display: flex;
					align-items: center;
					justify-content: center;
					width: 60rpx;
					height: 60rpx;
					border-radius: 50%;
					background-color: #eee;
				}
			}
		}

		.title-wrapper {
			display: block;
			justify-content: space-between;
			align-items: center;
			width: 100%;
			margin-bottom: 20rpx;
			.title {
				display: block;
				width: 620rpx;
				height: 92rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 500;
				font-size: 36rpx;
				color: #262626;
				text-align: left;
				font-style: normal;
				text-transform: none;
				margin-top:16rpx;
				margin-left: 16rpx;
			}
			.star-wrapper {
				display: block;
				transition: all 0.2s linear;
				margin-right: 30rpx;
				
			}
			.is-collect {
				transform: scale(1.3);
			}

		}
	}
	.detail-info{
		width: 718rpx;
		height: auto;
		background: #FFFFFF;
		border-radius: 24rpx 24rpx 24rpx 24rpx;
		margin:0 auto;
		margin-bottom: 32rpx;
		.desc-wrapper {
			.u-title{
				display: block;
				width: 686rpx;
				height: 40rpx;
				line-height: 40rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 500;
				font-size: 32rpx;
				color: #262626;
				text-align: left;
				font-style: normal;
				text-transform: none;
				margin:0 auto;
				padding-top: 30rpx;
			}
			.activity-desc {
				width: 686rpx;
				height: auto;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 26rpx;
				color: #262626;
				line-height: 45rpx;
				text-align: left;
				font-style: normal;
				text-transform: none;
				word-wrap: break-word;
				white-space: pre-line;
				line-height: 1.5;
				margin:0 auto;
				margin-top: 36rpx;
			}
		}
		.detail-imgs{
			width: 686rpx;
			height: auto;
			margin: 0 auto;
			border-radius: 0rpx 0rpx 0rpx 0rpx;
			.info-image {
				width: 100%;
			}
		}

	}
	.note-wrapper {
		position: relative;
		width: 718rpx;
		height: 300rpx;
		margin-top: 24rpx;
		margin:0 auto;
		.title {
			font-size: 32rpx;
			font-weight: 500;
			margin-bottom: 20rpx;
		}
	}
	.over-box{
		background-color: #F3F7F9;
	}
	.go-back{
		position: fixed;
		width:100%;
		height: 88rpx;
		overflow: hidden;
		z-index:999;
		top:88rpx;
		.back-icon{
			width: 64rpx;
			height: 64rpx;
			background-image: url(https://xwj-miniprogram.oss-cn-hangzhou.aliyuncs.com/static/images/back.png);
			background-size: 100% 100%;
			float: left;
			margin-left:18rpx;
			margin-top:16rpx;
			
		}
	}
	.empty-box{
		width: 100%;
		height:200rpx;
	}
</style>